<template>
	<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import visualizingTheme from './theme.json'; // 引入默认主题

echarts.registerTheme('visualizingTheme', visualizingTheme); // 注册主题

export default {
    name: 'echart',
    props: {
        className: { type: String, default: 'chart' },
        id: { type: String, default: 'chart' },
        width: { type: String, default: '100%' },
        height: { type: String, default: '100%' },
        options: { type: Object, default: () => ({}) }
    },
    data() {
        return {
            chart: null,
        }
    },
    watch: {
        options: {
            handler(options) {
                this.chart?.setOption(options); // 注意第二个参数
            },
            deep: true,
        }
    },
    mounted() {
        this.initChart();
    },
    beforeUnmount() {
        if (this.chart) {
            this.chart.dispose();
            this.chart = null;
        }
    },
    methods: {
        initChart() {
            const myChart = echarts.init(this.$el, 'visualizingTheme');
            myChart.setOption(this.options, true);
            this.chart = myChart;
        }
    }
}
</script>

<style scoped></style>
